<!DOCTYPE html>
<html>
<head>
    <title>商学院课程信息表</title>
    <#include "/header.html">
</head>
<body>
<style>
    th {
        text-align: center;
    }
</style>
<div id="rrapp" v-cloak>
    <div v-show="showList">
        <div class="grid-btn">
            <a class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;新增</a>
            <a class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;修改</a>
            <a class="btn btn-primary" @click="del"><i class="fa fa-trash-o"></i>&nbsp;删除</a>
        </div>
        <table id="jqGrid"></table>
        <div id="jqGridPager"></div>
    </div>

    <div v-show="!showList" class="panel panel-default">
        <div class="panel-heading">{{title}}</div>
        <form class="form-horizontal">
            <div class="form-group">
                <div class="col-sm-2 control-label">讲师</div>
                <div class="col-sm-10">
                    <input list="author" type="text" class="form-control" v-model="bBusinessInfo.authorName"
                           placeholder="讲师"/>
                    <datalist id="author" style="line-height: 10px">

                    </datalist>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">课程封面</div>
                <div class="col-sm-10">
                    <input type="file" accept="image/png,image/jpg,image/jpeg" class="form-control" value="选择封面"
                           placeholder="课程封面" onchange="insertImg(this, 'businessImgUrl')"/>
                    <img :src="bBusinessInfo.cover" alt="课程封面" id="imgUrl" style="width: 150px; height: 150px">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">课程标题</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="bBusinessInfo.title" placeholder="课程标题"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">课程内容</div>
                <div class="col-sm-10">
                    <textarea class="form-control" v-model="bBusinessInfo.content" placeholder="课程内容"
                              rows="8"></textarea>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">课程查看次数</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="bBusinessInfo.lookCount"
                           placeholder="课程查看次数"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">课程小节地址</div>
                <div class="col-sm-10">
                    <input disabled type="text" class="form-control" v-model="bBusinessInfo.path"
                           placeholder="课程小节地址"/>
                    <input type="file" id="fileUp" accept=".mp3, .mkv, .wma, video/*" class="form-control" value="选择音频"
                           placeholder="音频地址" onchange="insertImg(this, 'bBusinessDetailsUrl')"/>
                    <audio v-show="bBusinessInfo.pathType == 3"
                           :src="bBusinessInfo.path" id="audioUrl" controls="controls" oncanplaythrough="geTime(this)"
                           style="display: inline">
                        您的浏览器不支持 audio 标签。
                    </audio>
                    <video v-show="bBusinessInfo.pathType == 4"
                           :src="bBusinessInfo.path" id="videoUrl" width="200px" height="200px" controls="controls" oncanplaythrough="geTime(this)">
                        您的浏览器不支持 video 标签。
                    </video>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">课程时长</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="bBusinessInfo.pathTime" placeholder="课程时长"
                           maxlength="50"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">课程小节标题</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="bBusinessInfo.pathTitle" placeholder="课程小节标题"
                           maxlength="50"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">课程小节内容</div>
                <div class="col-sm-10">
                            <textarea class="form-control" v-model="bBusinessInfo.pathContent" placeholder="课程小节内容"
                                      rows="8"></textarea>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">课程价格类型</div>
                <div class="col-sm-10">
                    <label class="radio-inline">
                        <input type="radio" name="rangePrice" value="1" v-model="bBusinessInfo.rangePrice"/> 全员免费
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="rangePrice" value="2" v-model="bBusinessInfo.rangePrice"/> 会员免费/非会员付费
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="rangePrice" value="3" v-model="bBusinessInfo.rangePrice"/>
                        全员付费/会员和非会员价格不同
                    </label>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">课程原价</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="bBusinessInfo.originalPrice" placeholder="课程原价"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">课程非会员价</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="bBusinessInfo.nonMembersPrice"
                           placeholder="课程价格-非会员价"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">课程会员价</div>
                <div class="col-sm-10">
                    <input type="text" class="form-control" v-model="bBusinessInfo.membersPrice"
                           placeholder="课程价格-会员价"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">课程类型</div>
                <div class="col-sm-10">
                    <select id="type" class="form-control" v-model="bBusinessInfo.type">
                        <option value="-1" disabled selected hidden>请选择课程类型</option>
                        <!--                        <option value="1">新人宝典</option>-->
                        <!--                        <option value="2">招商课程</option>-->
                        <!--                        <option value="3">精选好货</option>-->
                        <!--                        <option value="4">管理力</option>-->
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">是否精选课程</div>
                <div class="col-sm-10">
                    <label class="radio-inline">
                        <input type="radio" name="choiceness" value="0" v-model="bBusinessInfo.choiceness"/> 不是精选课程
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="choiceness" value="1" v-model="bBusinessInfo.choiceness"/> 是精选课程
                    </label>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">删除状态</div>
                <div class="col-sm-10">
                    <label class="radio-inline">
                        <input type="radio" name="deleteState" value="0" v-model="bBusinessInfo.deleteState"/> 删除
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="deleteState" value="1" v-model="bBusinessInfo.deleteState"/> 正常
                    </label>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">公众号标识</div>
                <div class="col-sm-10">
                    <select id="gzhCode" class="form-control" v-model="bBusinessInfo.gzhCode">
                        <option value="-1" selected>全部平台</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">创建时间</div>
                <div class="col-sm-10">
                    <input disabled type="text" class="form-control" v-model="bBusinessInfo.createTime"
                           placeholder="创建时间"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label">修改时间</div>
                <div class="col-sm-10">
                    <input disabled type="text" class="form-control" v-model="bBusinessInfo.updateTime"
                           placeholder="修改时间"/>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label"></div>
                <input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
                <input type="button" class="btn btn-warning" @click="reload" value="返回"/>
            </div>
        </form>
    </div>
</div>

<script src="${request.contextPath}/statics/js/modules/sys/bbusinessinfo.js?_${.now?long}"></script>
<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.0.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    function geTime(ele) {
        var hour = parseInt((ele.duration) / 3600);
        var minute = parseInt((ele.duration % 3600) / 60);
        var second = Math.ceil(ele.duration % 60);
        if (hour < 10) {
            hour = "0" + hour;
        }
        if (minute < 10) {
            minute = "0" + minute;
        }
        if (second < 10) {
            second = "0" + second;
        }
        var pathTime = hour + ":" + minute + ":" + second;

        vm.bBusinessInfo.pathTime = minute + ":" + second;
        console.log("这段课程的时长为：" + pathTime);

    }

    // 公众号标识
    $.ajax({
        type: "POST",
        async: false,
        url: baseURL + 'sys/buserinfo/getUserGzhList',
        contentType: "application/json",
        success: function (r) {
            if (r.code == 0) {
                for (var i = 0; i < r.userGzhList.length; i++) {
                    $("#gzhCode").append(
                        "<option value=" + r.userGzhList[i].gzhCode + ">" + r.userGzhList[i].gzhName + "</option>");
                }
            }
        }
    });

    //讲师
    $.ajax({
        type: "POST",
        async: false,
        url: baseURL + 'sys/bbusinesslecturer/queryAll',
        contentType: "application/json",
        success: function (r) {
            if (r.code == 0) {
                for (var i = 0; i < r.businessLecturer.length; i++) {
                    $("#author").append(
                        "<option value=" + r.businessLecturer[i].authorName + ">" + "</option>");
                }
            }
        }
    });

    //课程类型
    var bBusinessDictEntity = {
        type: "课程类型"
    };
    $.ajax({
        type: "POST",
        async: false,
        url: baseURL + 'sys/bbusinessdict/queryAll',
        contentType: "application/json",
        data: JSON.stringify(bBusinessDictEntity),
        success: function (r) {
            if (r.code == 0) {
                for (var i = 0; i < r.bBusinessDict.length; i++) {
                    $("#type").append(
                        "<option value=" + r.bBusinessDict[i].number + ">" + r.bBusinessDict[i].name + "</option>");
                }
            }
        }
    });

    function insertImg(e, pathname) {
        var files = e.files;
        var length = files.length;
        upload(files[0], pathname);
    }

    function upload(file, pathname) {
        console.log(file);
        var client = new window.OSS({
            region: 'oss-cn-shenzhen', // 你的oss地址，hangzhou，shanghai，shenzhen
            accessKeyId: 'LTAI4Fh7PnYLw3uQvoUYiazS', //你的ak
            accessKeySecret: 'cEw7e8QMz0h4XY4qmzCoTzhHITqyUU', //你的secret
            //stsToken: '<Your securityToken(STS)>',//这里我暂时没用，注释掉
            bucket: 'zktuistatic', //你的oss名字
        });

        // 组装文件名
        var date = new Date();
        var yeaer = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        if (month < 10) {
            month = "0" + month;
        }
        if (day < 10) {
            day = "0" + day;
        }
        var datePath = yeaer + "" + month + "" + day;
        var key = "";
        key = pathname + "/" + datePath + "/image" + String(parseInt(Math.random() * 10000000, 10) + getFileExtendingName(
            file.name));

        client.put(key, file).then(function () {
            return client.get(key);
        }).then(function (ret) {
            console.log(ret.res.requestUrls[0]);
            let reqUrl = ret.res.requestUrls[0].replace("http://zktuistatic.oss-cn-shenzhen.aliyuncs.com/", "http://zktfile.wxslzf.com/");
            console.log(pathname);
            if (pathname == "businessImgUrl") {
                //课程封面
                let imgUrl = document.getElementById('imgUrl');
                vm.bBusinessInfo.cover = reqUrl;
                imgUrl.src = vm.bBusinessInfo.cover;
            } else if (pathname == "bBusinessDetailsUrl") {
                //课程地址

                let types = getFileExtendingName(file.name)
                if (types == ".mp3" || types == ".mp3" || types == ".wma") {
                    $("#videoUrl").hide();
                    $("#audioUrl").show();
                    let previewFile = document.getElementById('audioUrl');
                    vm.bBusinessInfo.path = reqUrl;
                    previewFile.src = vm.bBusinessInfo.path;
                } else {
                    $("#videoUrl").show();
                    $("#audioUrl").hide();
                    let previewFile = document.getElementById('videoUrl');
                    vm.bBusinessInfo.path = reqUrl;
                    previewFile.src = vm.bBusinessInfo.path;
                }

                $("#fileUp").val("");
            }

        }).catch(function (err) {
            console.log(err);
        });
    }

    function getFileExtendingName(filename) {
        // 文件扩展名匹配正则
        var reg = /\.[^\.]+$/;
        var matches = reg.exec(filename);
        if (matches) {
            return matches[0];
        }
        return '';
    }
</script>
</body>
</html>
